<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title></title>
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css"/>
    <style>
        .mt20{
            margin-top: 20px;
        }
        span.tooltip-test {
            width: 100px;
            overflow: hidden;
        }
        .definewidth{
            padding-bottom: 20px;
        }
        #procurementEstimateLi,#costLi,#directEstimateLi{
            display: none;
        }
    </style>
</head>
<body>
<div class="definewidth">
    <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
    <h2 style="text-align: center" id="title"></h2>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li id="procurementEstimateLi" role="presentation" class="active"><a href="#procurementEstimateTab" aria-controls="procurementEstimateTab" role="tab" data-toggle="tab">采购成本</a></li>
        <li id="costLi" role="presentation"><a href="#costTab" aria-controls="costTab" role="tab" data-toggle="tab">人工成本</a></li>
        <li id="directEstimateLi" role="presentation"><a href="#directEstimateTab" aria-controls="directEstimateTab" role="tab" data-toggle="tab">直接费用预估</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="procurementEstimateTab">
            <!--采购成本-->
            <div id="procurement">
                <form class="form" id="procurementEstimateForm">
                    <p>采购成本预估：</p>
                    <table class="table table-bordered table-hover m10" style="margin-bottom: 0">
                        <tr>
                            <th>采购类型<span style="color: red">*</span></th>
                            <th>预计采购日期<span style="color: red">*</span></th>
                            <th>预计采购金额<span style="color: red">*</span></th>
                            <th>采购税率(%)<span style="color: red">*</span></th>
                            <th>预计采购成本</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>
                                <select name="procurementType" id="procurementType" class="form-control"></select>
                            </td>
                            <td>
                                <input type="text" class="form-control" value="" id="purchaseDate" name="purchaseDate">
                            </td>
                            <td>
                                <input type="number" class="form-control" id="amount" name="amount">
                            </td>
                            <td>
                                <input type="number" class="form-control" id="vat" name="vat" value=""
                                       placeholder="格式：如17%，则填写17">
                            </td>
                            <td>
                                <input type="text" class="form-control" id="procurementCost" name="procurementCost"
                                       readonly>
                            </td>
                            <td>
                                <input type="text" class="form-control" value="" id="remark" name="remark">
                            </td>
                            <td>
                                <button type="button" class="btn btn-default" id="add">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true" style="color: #5cb85c"></span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </form>
                <table id="table" class="table table-bordered table-hover m10"></table>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="costTab">
            <!--人工成本-->
            <div id="cost">
                <form class="form mt20" id="costForm">
                    <p>人工成本预估：</p>
                    <table class="table table-bordered table-hover m10" style="margin-bottom: 0">
                        <tr>
                            <th>使用部门<span style="color: red">*</span></th>
                            <th>预计发生月份<span style="color: red">*</span></th>
                            <th>人员级别<span style="color: red">*</span></th>
                            <th>预计人天<span style="color: red">*</span></th>
                            <th>预计人工成本</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>
                                <select class="form-control" id="organizationId" name="organizationId" ></select>
                            </td>
                            <td>
                                <input type="text" class="form-control" value="" id="salMonth" name="salMonth">
                            </td>
                            <td>
                                <select class="form-control" id="personnelLevel" name="personnelLevel"></select>
                            </td>
                            <td>
                                <input type="number" class="form-control" id="day" name="day" value="1">
                            </td>
                            <td>
                                <input type="text" class="form-control" id="totalAmount" name="totalAmount" readonly>
                            </td>
                            <td>
                                <input type="text" class="form-control" value="" id="Costremark" name="remark">
                            </td>
                            <td>
                                <button type="button" class="btn btn-default" id="CostAdd">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true" style="color: #5cb85c"></span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </form>
                <table id="costEstimatetable" class="table table-bordered table-hover m10"></table>
                <div style="text-align: center;margin-top: 10px">
                    <button type="button" class="btn btn-primary" id="approval">待审批</button>
                    <button type="button" class="btn btn-primary" id="gather">已审批汇总</button>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="directEstimateTab">
            <!--直接费用预估-->
            <div id="direct">
                <form class="form mt20" id="directEstimateForm">
                    <p>直接费用预估：</p>
                    <table class="table table-bordered table-hover m10" style="margin-bottom: 0">
                        <tr>
                            <th>预计发生月份<span style="color: red">*</span></th>
                            <th>预计费用类别<span style="color: red">*</span></th>
                            <th>预计费用类型<span style="color: red">*</span></th>
                            <th>预计费用金额<span style="color: red">*</span></th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="form-control" value="" id="costDate" name="costDate">
                            </td>
                            <td>
                                <select class="form-control" id="costCategory" name="costCategory" ></select>
                            </td>
                            <td>
                                <select class="form-control" id="costType" name="costType" ></select>
                            </td>
                            <td>
                                <input type="number" class="form-control" id="costAmount" name="costAmount" >
                            </td>
                            <td>
                                <input type="text" class="form-control" value="" id="Directremark" name="remark">
                            </td>
                            <td>
                                <button type="button" class="btn btn-default" id="DirectrAdd">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true" style="color: #5cb85c"></span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </form>
                <table id="directEstimatetable" class="table table-bordered table-hover m10"></table>
            </div>
        </div>
    </div>


    <!--人工审批弹窗-->
    <div class="modal fade" tabindex="-1" role="dialog" id="approvalModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">人工成本预估</h4>
                </div>
                <div class="modal-body">
                    <table id="costApproval" class="table table-bordered table-hover m10"></table>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--人工汇总弹窗-->
    <div class="modal fade" tabindex="-1" role="dialog" id="gatherModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">人工成本预估</h4>
                </div>
                <div class="modal-body">
                    <table id="costGather" class="table table-bordered table-hover m10"></table>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!--弹窗-->
    <div class="modal fade" tabindex="-1" role="dialog" id="changeModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">记录作废</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" id="changeForm">
                        <div>
                            <label for="changeRemark" style="margin-right: 10px">备注</label>
                            <textarea class="form-control" style="width: 80%" id="changeRemark" rows="5" name="changeRemark" placeholder="请输入120字以内的备注"  maxlength="120"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveChange">保存</button>
                    <button type="button" class="btn btn-success" id="hideChange">返回</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="finishModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">完成开票</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" id="finishForm">
                        <div style="margin-bottom:10px">
                            <label for="realBillDate" style="margin-right:10px">实际开票日期<span style="color: red">*</span></label>
                            <input type="text" class="form-control" value="" name="realBillDate" id="realBillDate">
                        </div>
                        <div>
                            <label for="finishRemark" style="margin-right: 10px">备注</label>
                            <textarea class="form-control"  style="width: 80%" id="finishRemark" rows="5" name="finishRemark" placeholder="请输入120字以内的备注"  maxlength="120"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="saveFinish">保存</button>
                    <button type="button" class="btn btn-success" id="hideFinish">返回</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/validateform.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>
<script type="text/javascript" src="estimate.js"></script>
<script type="text/javascript" src="../../assets/js/bui.js"></script>
<script type="text/javascript" src="../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
</body>
</html>